<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			html,
			body {
				height: 100%;
				overflow: hidden;
			}

			#wrap {
				position: relative;
				margin: 100px auto;
				width: 300px;
				height: 300px;
				border: 1px solid;
			}

			#test {
				position: absolute;
				left: 50%;
				top: 50%;
				/*
				居中
				这里有一个局限性。
				如果下面的 test 也使用transform，那么当前的将会被覆盖。
				*/
				/* transform: translate3d(-50%,-50%,0); */

				/*
				最终使用这个
				*/
				margin-left: -50px;
				margin-top: -50px;
				width: 100px;
				height: 100px;
				background: pink;

				text-align: center;
				font: 30px/100px "agency fb";

				border-radius: 50%;

				/* transition: 3s; */

				/*刷新页面就运行这个动画了*/
				animation-name: move;
				animation-duration: 1s;
				/*匀速转动，默认的是先加速后减速*/
				animation-timing-function: ease-in;
				/*动画运行的次数*/
				animation-iteration-count: infinite;
				animation-direction: reverse;

				animation-fill-mode: backwards;
			}

			@keyframes move {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(180deg);
				}
			}

			#test2 {
				position: absolute;
				left: 50%;
				top: 50%;
				/*
				居中
				这里有一个局限性。
				如果下面的 test 也使用transform，那么当前的将会被覆盖。
				*/
				/* transform: translate3d(-50%,-50%,0); */
				
				/*
				最终使用这个
				*/
				margin-left: -50px;
				margin-top: -50px;
				width: 100px;
				height: 100px;
				background: pink;
				
				text-align: center;
				font: 30px/100px "agency fb";
				
				border-radius: 50%;
				
				animation-name: move2;
				/*
				动画外的状态，
				如果使用backwards，延迟启动的时候，动画停止在-100px
				如果使用forwards，运行完成，动画停止在100px
				both，表示开头在-100px，停止在100px
				*/
				animation-fill-mode: both;
				animation-delay: 2s;
				/*这是一个乒乓效果 alternate 交替的*/
				animation-direction: alternate;
				animation-iteration-count: 3;
				animation-duration: 1s;
				animation-timing-function: linear;
			}

			@keyframes move2 {
				from {
					transform: translateY(-100px);
				}

				to {
					transform: translateY(100px);
				}
			}

			#wrap:hover #test2{
				/*鼠标经过，动画暂停*/
				animation-play-state: paused;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="test">
				111
			</div>

			<div id="test2">
				222
			</div>
		</div>
	</body>
</html>
